<template>
    <div class="container">
        <el-form
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="login"
    ref="ruleFormRef"
    status-icon 
  >
  <h2>十方智育-后台登录</h2>
    <el-form-item label="用户名" prop="username">
      <el-input  type="username" v-model="ruleForm.username" />
    </el-form-item>
    <el-form-item label="密码" prop="userpwd" >
      <el-input  type="userpwd" v-model="ruleForm.userpwd" />
    </el-form-item>
    <el-form-item >
      <el-button type="primary" @click="submitForm()">登录</el-button>
      <el-button @click="resetForm()">取消</el-button>
    </el-form-item>
  </el-form>
    </div>
</template>
<script setup>
import {  ref } from 'vue'
import {useRouter} from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios';

const router = useRouter();
const ruleFormRef = ref()


const ruleForm = ref({
  username: '',
  userpwd: '',
  source:1
})

const rules = ref({
  username: [{ required:true,message:'用户名为空', trigger: 'blur' },
        {min:3,max:10,message:'用户名长度在3-10以内',trigger:'blur'}
    ],
    userpwd: [{ required:true,message:'密码为空', trigger: 'blur' } ,
    {min:3,max:12,message:'用户名长度在3-12以内',trigger:'blur'}],
})
function submitForm(){
    // 进行表单校验 只有检验通过 才能进行登录 
    //1. 通过 ref属性 获取表单对象 
    //2. 调用validate 进行校验
    ruleFormRef.value.validate(valid=>{
       if(valid){
        // 可以进行登录操作
        axios({
          method:'get',
          url:'http://localhost:8081/sfzy/login',
          params:ruleForm.value
        }).then(res=>{
          console.log(res);
          // 跳转到 main主页面 
          router.replace('/main')

        })
       }else{
        //校验不通过 提示信息 
        ElMessage.error('输入的用户名和密码不符合规则')
       }
     })
  }
  // 取消按钮 
  function resetForm(){
    ruleFormRef.value.resetFields();//重置表单
  }


</script>
<style scoped>
.container{
    height:100vh;
    background: url(@/assets/login_bg.jpg) no-repeat center;
    overflow: hidden;
    background-size:100% 100% ;
}
.el-form{
    width: 450px;
    margin: 200px auto;
    background: rgb(234, 228, 228);
    border: 1px solid rgb(137, 137, 218);
    padding: 20px 40px;
    border-radius: 15px;
    box-shadow: 3px 3px 3px rgb(189, 234, 122);
}
h2{
    text-align: center;
}

</style>